<template>
	<view style="height: 100vh; overflow-y: auto">
		<view class="clockIn">
			<view class="valiableInfo">
				<up-form labelPosition="top" :model="userInfo" ref="uFormRef" :rules="rules" labelWidth="100%">
					<up-form-item label="手机号" prop="phone" required>
						<up-input v-model="userInfo.phone" placeholder="请输入内容"> </up-input>
					</up-form-item>
					<!-- <up-form-item label="开始日期" prop="register_time" required>
						<span>今天的日期</span>
						<up-input v-model="showRegisterTime" disabled></up-input>
					</up-form-item> -->
					<up-form-item label="微信号" prop="wxid" required>
						<up-input v-model="userInfo.wxid" placeholder="请输入内容"></up-input>
					</up-form-item>
					<up-form-item label="微信昵称" prop="wxname" required>
						<up-input type="nickname" v-model="userInfo.wxname" placeholder="请输入内容"></up-input
					></up-form-item>
					<up-form-item label="账号是否实名" prop="auth" required>
						<span>只要没实名的账号</span>
						<view @click="show = true">
							<up-input v-model="userInfo.auth" readonly placeholder="请输入内容"></up-input>
						</view>
						<up-action-sheet
							:actions="list"
							:closeOnClickOverlay="true"
							:closeOnClickAction="true"
							:show="show"
							@close="closeActionList"
							@select="selectClick"
						></up-action-sheet>
					</up-form-item>
					<up-form-item label="支付宝收款账号--姓名" prop="alipay_user" required>
						<span>例：<span style="color: #0078b4">11111@qq.com</span>---张三</span>
						<up-input v-model="userInfo.alipay_user" placeholder="请输入内容"></up-input>
					</up-form-item>

					<!-- <up-form-item label="历史购买记录截图" prop="register_image" required>
						<up-upload
							:fileList="register_imageList"
							@afterRead="afterRead"
							@delete="deletePic"
							multiple
							:maxCount="3"
							:previewFullImage="true"
						></up-upload>
					</up-form-item> -->
					<up-button @click="submit" type="primary">注册</up-button>
				</up-form>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, watch } from 'vue';
import { goRegister } from '@/api/user.js';
import dayjs from 'dayjs';
import { getWxopenid } from '@/utils/getWxOpenId.js';
import { getBase64FromLocalAsync } from '@/utils/getBase64Async.js';
import { useUserInfo } from '@/stores/userInfo.js';

const userStore = useUserInfo();

// let showRegisterTime = ref('');
// onMounted(() => {
// 	userInfo.value.register_time = dayjs().format('YYYY-MM-DDTHH:mm:ss');
// 	showRegisterTime.value = userInfo.value.register_time.slice(0, 10);
// });

let auth = null;
let userInfo = ref({
	wxopenid: '',
	wxid: '',
	wxname: '',
	phone: '',
	auth: null,
	// custom_name: '',
	alipay_user: '',
	avatar_url: '',
	// register_image: [],
	// register_time: '',
});
const show = ref(false);
const list = ref([
	{
		name: '已认证',
	},
	{
		name: '未认证',
	},
]);
// 方法
const selectClick = (index) => {
	userInfo.value.auth = index.name;
	console.log(index);
};
const closeActionList = () => {
	show.value = false;
};

let changeAuth = () => {
	console.log(userInfo.value.auth);
};
// 校验规则
const rules = {
	wxid: {
		required: true,
		message: '请输入微信号',
		trigger: ['blur', 'change'],
	},
	wxname: {
		required: true,
		message: '请输入微信昵称',
		trigger: ['blur', 'change'],
	},
	phone: [
		{
			required: true,
			message: '请输入手机号',
			trigger: ['blur', 'change'],
		},
		{
			// 自定义验证函数
			validator: (rule, value, callback) => {
				// 返回true表示校验通过，返回false表示不通过
				return uni.$u.test.mobile(value);
			},
			message: '请输入符合规则的手机号',
			// 触发器可以同时用blur和change
			trigger: ['blur'],
		},
	],
	auth: {
		required: true,
		message: '是否认证',
		trigger: ['blur', 'change'],
	},
	alipay_user: {
		required: true,
		message: '请输入支付宝信息',
		trigger: ['blur', 'change'],
	},
	// register_image: {
	// 	type: 'array',
	// 	required: true,
	// 	message: '请添加截图',
	// 	trigger: ['blur', 'change'],
	// },
};
// 使用 ref 创建响应式引用
const uFormRef = ref(null);

let register_imageList = ref([]);
// 删除图片
const deletePic = (event) => {
	userInfo.value.register_image.splice(event.index, 1);
};

const afterRead = async (event) => {
	register_imageList.value.push({ url: event.file[0].url });
	// console.log(register_imageList.value);
	// userInfo.value.register_image.push(event.file[0].url);
	let result = await getBase64FromLocalAsync(event.file[0].url);
	if (result) {
		userInfo.value.register_image.push(result);
	}
};

const getUserProfileAsync = () => {
	return new Promise((resolve, reject) => {
		wx.getUserProfile({
			desc: '获取你的昵称、头像',
			success: (res) => {
				// console.log('用户信息获取成功:', res);
				resolve(res);
			},
			fail: (err) => {
				// console.error('用户信息获取失败:', err);
				reject(err);
			},
		});
	});
};

const submit = async () => {
	uFormRef.value
		.validate()
		.then(async (valid) => {
			if (valid) {
				let resOpenid = await getWxopenid();
				if (resOpenid.success) {
					userInfo.value.wxopenid = resOpenid.data.openid;
				}

				// 创建一个临时对象来存储提交的数据
				const submitData = {
					...userInfo.value,
					auth: userInfo.value.auth === '已认证' ? true : false,
				};

				let res = await goRegister(submitData);
				if (res.success) {
					uni.$u.toast(res.message);
					await userStore.setUserData();
					setTimeout(() => {
						uni.switchTab({
							url: 'index',
						});
					}, 1000);
				} else {
					uni.$u.toast(res.message);
				}
			} else {
				uni.$u.toast('校验失败');
			}
		})
		.catch(() => {
			// 处理验证错误
			uni.$u.toast('校验失败');
		});
};
</script>
<style lang="scss" scoped>
.clockIn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20rpx 40rpx;
}

.valiableInfo {
	width: 100%;
}
</style>
